<template>
    <div class="wrapper" :style="{width:G.dom.getWidth()+'px'}">
        <div class="profile">
            <div class="big_image">
                <img src="https://qn.diyeetech.com/20181210-184355-7ffbe5c5.jpg?imageView2/2/w/300" alt=""/>
            </div>
            <div class="h1_test">
                <h1>抽象黑夜</h1>
                <small>REN177</small>
            </div>
        </div>
        <div class="buliao_wrapper">
            <div class="label">
                面料:
            </div>
            <div class="buliao_list">
                <div class="item" v-for="item in $data.get_fabric_result"
                     @click="select_fabric(item)"
                     :data-acitve="$data.objectid_select_fabric==item.objectId">
                    {{item.name}} 幅宽{{item.width}}米·单价￥{{item.unitPrice}}
                </div>
            </div>
        </div>
        <div class="number_wrapper_wrapper">
            <div class="label">数量:</div>
            <div class="number_wrapper">
                <SvgIcon icon="icon-jian" class="icon" @click.native="down_quatity"></SvgIcon>
                <input class="number" type="number" :value="fabric_quantity"/>
                <SvgIcon icon="icon-plus" class="icon" @click.native="up_quatity"></SvgIcon>
            </div>
        </div>
        <div class="add_to_cart_button" @click="add_to_shop_cart">
            加入购物车
        </div>
    </div>
</template>
<script>
    import SvgIcon from '../../../components/svgIcon'
    import {init_fabric, get_fabric, add_to_shop_cart, get_shop_cart_items} from "./service";
    import withStore from "../../../vuex/withStore";
    import myalert from "../../../utils/myalert";

    export default withStore({
        components: {
            SvgIcon
        },
        props:["add_to_cart_finish"],
        data() {
            return {
                get_fabric_result: [],
                objectid_select_fabric: this.getStore("product.objectid_select_fabric"),
                currentSelectFabric: this.getStore("product.currentSelectFabric"),
                fabric_quantity: this.getStore("product.fabric_quantity"),
                design: {objectId: this.$route.params.id}
            }
        },
        async mounted() {
            var get_fabric_result = await  get_fabric()
            this.$data.get_fabric_result = get_fabric_result
            /*获取shopcart*/

        },
        methods: {
            select_fabric(item) {
                this.currentSelectFabric = item
                this.objectid_select_fabric = item.objectId
                this.setStore("product.currentSelectFabric", this.currentSelectFabric)
                this.setStore("product.objectid_select_fabric", this.objectid_select_fabric)
            },
            down_quatity() {
                if (this.fabric_quantity <= 1) {
                    return false
                }
                this.fabric_quantity = this.fabric_quantity - 1
            },
            up_quatity() {
                this.fabric_quantity = this.fabric_quantity + 1
            },
            add_to_shop_cart() {
                myalert.loading()
                add_to_shop_cart({
                    quantity: this.fabric_quantity,
                    fabric: this.currentSelectFabric,
                    design: this.design
                }).then(e => {
                    /*加入购物车成功*/
                    myalert.clear()
                    myalert.success("加入购物车success")
                    /*刷新 shopcart */
                    var self = this
                    get_shop_cart_items().then(res => {
                        self.shopcartItems = res
                        self.setStore('shopcart.shopcartItems', res)
                        self.add_to_cart_finish()
                    })
                }).catch(e => {
                    myalert.clear()
                    myalert.fail("加入购物车失败")
                    self.add_to_cart_finish()
                })
            }
        }
    })
</script>
<style lang="less" scoped>
    .wrapper {
        z-index: 999;
        width: 100%;
        max-width: 750px;
        height: px2rem(800);
        .number_wrapper_wrapper {
            display: flex;
            padding-left: px2rem(20);
            padding-right: px2rem(20);
            .label {
                margin-top: 2px;
                width: px2rem(80);
            }
            .number_wrapper {
                display: flex;
                align-items: center;
                .icon {
                    border: 4px solid #ddd;
                    border-radius: 50%;
                    font-size: 25px;
                    padding: 2px;
                }
                .number {
                    padding-left: 5px;
                    border: none;
                    background: #eee;
                    width: px2rem(120);
                    height: px2rem(50);
                }
            }
        }

        .buliao_wrapper {
            padding-left: px2rem(20);
            padding-right: px2rem(20);
            display: flex;
            .label {
                margin-top: 8px;
                width: px2rem(80);
            }
            .buliao_list {
                .item {
                    border: 3px solid #eee;
                    padding: 5px;
                    border-radius: 20px;
                    margin-bottom: 5px;
                    &[data-acitve] {
                        border-color: #fa8324;
                        color: #fa8324;
                    }
                }
            }
        }
        .profile {
            .big_image {
                position: fixed;
                top: -50px;
                left: 20px;
                display: flex;
                width: px2rem(200);
                height: px2rem(200);
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }

            .h1_test {
                position: relative;
                top: px2rem(-10);
                left: px2rem(280);
            }
        }
        .add_to_cart_button {
            margin: auto;
            margin-top: 10px;
            width: 3rem;
            height: .36rem;
            background-image: linear-gradient(90deg, #5f5f5f, #2b2b2b);
            border-radius: 36px;
            color: #fff;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>